<template>
	<view>
		<view class="body after-navber">
			<navigator class="return-index-btn" openType="redirect" url="/pages/index/index" v-if="show_index">
				<image :src="__wxapp_img.nav.index.url" style="width: 50rpx; height: 50rpx"></image>
			</navigator>
			<view class="nav2 flex-y-center">
				<view class="item" @tap="tuangoutap">线下兑换</view>
				<view class="item active">线上兑换</view>
				<view class="item" @tap="shangpintap">商品订单</view>
			</view>
			<view class="flex-row tab-bar">
				<view class="flex-grow-1">
					<view :class="status == 0 ? 'active' : ''" @tap="changeStatus(0)">
						<text>待付款</text>
					</view>
				</view>
				<view class="flex-grow-1">
					<view :class="status == 1 ? 'active' : ''" @tap="changeStatus(1)">
						<text>待发货</text>
					</view>
				</view>
				<view class="flex-grow-1">
					<view :class="status == 2 ? 'active' : ''" @tap="changeStatus(2)">
						<text>待收货</text>
					</view>
				</view>
				<view class="flex-grow-1">
					<view :class="status == 3 ? 'active' : ''" @tap="changeStatus(3)">
						<text>已收货</text>
					</view>
				</view>
				<view class="flex-grow-1">
					<view :class="status == 4 ? 'active' : ''" @tap="changeStatus(4)">
						<text>售后</text>
					</view>
				</view>
				<view class="flex-grow-1">
					<view :class="status == 5 ? 'active' : ''" @tap="changeStatus(5)">
						<text>已完成</text>
					</view>
				</view>
			</view>
			<view class="order-list">
				<view class="no-data-tip" v-if="show_no_data_tip">暂无相关订单</view>
				<view class="order-item" v-for="(order, index) in order_list" :key="order.id">
					<navigator :url=" '/pages2/shop/order-detail/order-detail?id=' + order.id">
						<view
							style="font-size: 9pt; margin-bottom: 12rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
							v-if="order.store">
							{{ order.store.name }}
						</view>
						<view class="flex-row order-info">
							<view class="flex-grow-1">订单号:{{ order.order_no }}</view>
							<view class="flex-grow-0">{{ order.createtime }}</view>
						</view>
						<view class="goods-list">
							<view class="goods-item flex-row" v-for="(goods, index1) in order.item" :key="goods.id"
								@tap.stop="refund_detail(goods.aftersale_status,order.id,goods.id)">
								<view class="flex-grow-0" style="overflow: visible">
									<image class="goods-pic" mode="aspectFill" :src="goods.product_image"></image>
								</view>

								<view class="flex-grow-1 flex-col">
									<view class="flex-grow-1">
										<view class="goods-name">{{ goods.product_title }}</view>
										<view class="attr-list">
											<view class="attr-item">
												{{ goods.product_sku_price_id ? goods.product_sku_text : '默认'}}
											</view>
										</view>
									</view>
									<view class="flex-grow-0 flex-row">
										<view class="flex-grow-1 num">×{{ goods.goods_num }}</view>
										<view class="flex-grow-0 flex-y-center price"><image src="/static/images/jinbi.png" class="icon"></image>{{ goods.product_score }}</view>
									</view>
									<view class="flex-grow-0 flex-row" v-if="order.status == 4">
										<view v-if="goods.aftersale_status == 1">
											等待处理
										</view>
										<view style="color: #36ba75" v-if="goods.aftersale_status == -1">已拒绝</view>
										<view style="color: #36ba75" v-if="goods.aftersale_status == 2">售后完成</view>

									</view>
								</view>
							</view>
						</view>
					</navigator>

					<view class="flex-row">
						<view class="flex-grow-1 flex-y-center">
							<block v-if="status == 4">
								<block v-if="order.refund_type == 1">
									退款：
									<text style="color: #ff4544">￥{{ order.refund_price }}</text>
								</block>
								<block v-if="order.refund_type == 2">
									退货退款：
									<text style="color: #ff4544">￥{{ order.refund_price }}</text>
								</block>
								<block v-if="order.refund_type == 3">换货</block>
								<block v-if="order.refund_type == 4">
									仅退款：
									<text style="color: #ff4544">￥{{ order.refund_price }}</text>
								</block>
							</block>
							<block v-else>合计：{{ order.score_amount }}{{money_name}}
								{{order.total_fee > 0 ? '+￥'+order.total_fee :''}}</block>
						</view>
						<view class="flex-grow-0 flex-y-center flex-row">
							<block v-if="status == 4">
								<view v-if="order.refund_status == 0">
									<block v-if="order.refund_type == 1">
										<block v-if="order.is_agree == 0">等待处理</block>
										<block v-else>
											<block v-if="order.is_user_send == 0">待买家发货</block>
											<block v-else>等卖家待处理</block>
										</block>
									</block>
									<block v-else>等卖家待处理</block>
								</view>
								<view style="color: #36ba75" v-if="order.refund_status == 1">已同意并退款</view>
								<view style="color: #36ba75" v-if="order.refund_status == 2">已同意换货</view>
								<block v-if="order.refund_status == 3">
									<view style="color: #ff4544" v-if="order.refund_type == 1">已拒绝退货退款</view>
									<view style="color: #ff4544" v-if="order.refund_type == 2">已拒绝换货</view>
								</block>
							</block>
							<block v-else>
								<!-- <view class="flex-grow-1" v-if="order.status == 1">
									<text v-if="order.apply_delete == 1">退款申请中</text>
									<button @tap="orderRevoke(order.id)" class="order-option-btn" :data-id="order.id"
										v-if="order.is_pay ==1">申请退款</button>
									
								</view> -->
								<view class="flex-grow-1" v-if="order.is_pay == 0">
									<button @tap="cancel(order.id)" class="order-option-btn"
										:data-id="order.id">取消</button>
								</view>
								<view class="flex-grow-1" v-if="order.is_pay == 0">

									<button @tap="orderPay" class="order-option-btn" :data-id="order.id"
										:data-index="index">付款</button>
								</view>

								<view class="flex-grow-1 flex-row" v-if="order.status == 2">
									<view class="order-option-btn" @tap="searchDetail(order.id)" :data-id="order.id">物流
									</view>
									<view class="flex-grow-0">
										<button @tap="orderConfirm(order.id)" class="order-option-btn"
											:data-id="order.id">确认收货</button>
									</view>
								</view>
								<view class="flex-grow-1" v-if="order.status== 2 || order.status== 3">
									<button @tap="orderRevoke(order.id)" class="order-option-btn"
										:data-id="order.id">申请售后</button>
								</view>
								<view class="flex-grow-1" v-if="order.status > 2 && order.is_comment==0">
									<navigator class="order-option-btn"
										:url="'/pages2/shop/order-comment/order-comment?type=goods&id=' + order.id">评价
									</navigator>
								</view>
								<view class="flex-grow-1"
									v-if="order.is_refund_money == 1 || order.is_change_product==1">
									<navigator class="order-option-btn"
										url="/pages2/shop/order-refund-detail/order-refund-detail">
										售后详情
									</navigator>
								</view>
							</block>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="" style="color: #bbb;margin: 15rpx;text-align: center;" v-if="!has_more">
			没有了~
		</view>
	</view>
</template>

<script>
	var plugin = requirePlugin("logisticsPlugin")

	import {
		Order
	} from '../../../apirequest/order-model.js';
	var o = new Order();
	export default {
		data() {
			return {
				order_list: [],

				status: 0,
				page: 1,
				has_more: true,
				type: 2,
				money_name:this.globalData.money_name,
			}
		},
		onLoad(options) {
			if (options.status) {
				this.status = options.status
			}

		},
		onShow() {
			this.order_list = []
			this.page = 1
			this.has_more = true
			this._getList();
		},
		onReachBottom() {
			this._getList();
		},
		methods: {
			shangpintap(){
				uni.reLaunch({
					url: '/pages/mch/goods-order/goods-order'
				})
			},
			tuangoutap(){
				uni.switchTab({
					url:'/pages/group/order/order'
				})
			},
			_getList() {
				var that = this;
				if (!this.has_more) {
					return false;
				}
				var page = this.page,
					status = this.status;
				o.get_order_list({
					page: page,
					status: status,
					type: this.type
				}, (res) => {
					if (res.code == 1) {
						that.order_list = that.order_list.concat(res.data.data)
						that.page = page + 1
						that.has_more = res.data.has_more
					} else {
						uni.showToast({
							title: '网络繁忙',
							icon: 'none'
						})
					}
				})
			},
			refund_detail(status, id, item_id) {
				if (status != 0) {
					uni.navigateTo({
						url: "/pages2/shop/order-refund-detail/order-refund-detail?id=" + id + "&order_item_id=" +
							item_id
					})
				} else {
					uni.navigateTo({
						url: "/pages2/shop/order-detail/order-detail?id=" + id
					})
				}
			},
			changeStatus(status) {
				this.status = status;
				this.order_list = []
				this.page = 1
				this.has_more = true
				this._getList()
			},
			//物流
			searchDetail(id) {
				// uni.navigateTo({
				// 	url:"/pages2/shop/express-detail/express-detail?order_id="+id
				// })
				o.express({
					order_id: id
				}, (res) => {
					if (res.code == 1) {

						let waybillToken = res.data;

						// 在此通过调用api来查询微信快递服务详情
						// 必须用预览才能测试这个功能，无法在工具端模拟
						plugin.openWaybillTracking({
							waybillToken: waybillToken
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			//确认收货
			orderConfirm(id) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确认收到货了吗?',
					success: function(res) {
						if (res.confirm) {
							o.confirm_order({
								id: id
							}, (res) => {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								if (res.code == 1) {
									setTimeout(() => {
										uni.redirectTo({
											url: "/pages2/shop/order/order?status=3"
										})
									}, 1000)

								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//付款
			orderPay: function(e) {
				var id = e.currentTarget.dataset.id;
				uni.showLoading({
					title: '加载中'
				});
				o.pay_again({
					id: id
				}, (res) => {
					uni.hideLoading();
					if (res.code == 1) {
						if (res.data.type == 1) {
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.data.data.timeStamp,
								nonceStr: res.data.data.nonceStr,
								package: res.data.data.package,
								signType: res.data.data.signType,
								paySign: res.data.data.paySign,
								success: function(res) {
									uni.showToast({
										title: '支付成功',
										icon: 'none'
									})

									setTimeout(() => {
										uni.redirectTo({
											url: "/pages2/integral-mall/order/order?status=1"
										})
									}, 1000)

								},
								fail: function(err) {
									uni.showToast({
										title: '支付失败',
										icon: 'none'
									})
								}
							});
						} else {
							uni.showToast({
								title: '支付成功',
								icon: 'none'
							})

							setTimeout(() => {
								uni.redirectTo({
									url: "/pages2/integral-mall/order/order?status=1"
								})
							}, 800)
						}
					} else {
						uni.showToast({
							title: res.data,
							icon: 'none'
						})
					}
				})
			},
			orderRevoke: function(id) {
				uni.navigateTo({
					url: '/pages2/shop/order-refund/order-refund?order_id=' + id
				})
			},
			//取消
			cancel(id) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确认取消该订单吗?',
					success: function(res) {
						if (res.confirm) {
							o.cancel_order({
								id: id
							}, (res) => {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								if (res.code == 1) {
									setTimeout(() => {
										that.order_list = []
										that.page = 1
										that.has_more = true
										that._getList()
									}, 1000)

								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
		}
	}
</script>

<style>
	.nav2 {
		background: #fff;
		width: 100%;
		font-weight: 700;
		font-size: 0.85rem;
	}

	.nav2 .item {
		padding: 25rpx 0;
		width: 50%;
		text-align: center;
		border-right:1px solid #f3f3f3 ;
	}
	.nav2 .item:nth-child(3){
		border-right: none;
	}

	.nav2 .active {
		color: #fff;
		background: #fc1849;
	}

	.tab-bar {
		background: #fff;
		border-bottom: 1rpx solid #e3e3e3;
		width: 100%;
		z-index: 1000;
	}



	.tab-bar .flex-grow-1 view {
		display: block;
		text-align: center;
		font-size: 0.85rem;
	}

	.tab-bar .flex-grow-1 view text {
		height: 90rpx;
		line-height: 90rpx;
		display: inline-block;
	}

	.tab-bar .flex-grow-1 view.active text {
		color: #f00;
	}

	.order-list .order-item {
		background: #fff;
		padding: 15rpx 24rpx;
		margin-top: 15rpx;
		border-bottom: 1rpx solid #e3e3e3;
	}

	.order-list .order-info {
		font-size: 9pt;
		color: #888;
	}

	.goods-item {
		background: #fff;
		border-bottom: 1rpx solid #e3e3e3;
		padding: 15rpx 0;
		border-bottom: 1rpx solid #eee;
		margin: 15rpx 0;
	}

	.goods-item:first-child {
		border-top: 1rpx solid #eee;
	}

	.goods-item .goods-pic {
		width: 156rpx;
		height: 156rpx;
		margin-right: 20rpx;
	}

	.goods-item .goods-name {
		margin-bottom: 10rpx;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.goods-item .attr-list,
	.goods-item .num {
		font-size: 9pt;
		color: #888;
	}

	.goods-item .attr-list .attr-item {
		display: inline-block;
		margin-right: 36rpx;
	}

	.goods-item .attr-list .attr-item:last-child {
		margin-right: 0;
	}

	.goods-item .price {
		color: #ff4544;
	}
	.goods-item .price .icon{
		width: 30rpx;
		height: 30rpx;
		margin-right: 4rpx;
	}

	.order-option-btn {
		border: 1rpx solid #FC1849;
		background: #fff;
		border-radius: 10rpx;
		height: 50rpx;
		line-height: 50rpx;
		color: inherit;
		margin-left: 20rpx;
		padding: 0 20rpx;
		font-size: 0.85rem;
		font-weight: 500;
		background: #fff;
		color: #FC1849;
	}

	.order-option-btn::after {
		display: none;
	}

	.return-index-btn {
		position: fixed;
		right: 0;
		bottom: 100rpx;
		display: inline-block;
		background: rgba(157, 157, 157, 0.5);
		padding: 10rpx 20rpx;
		z-index: 1000;
		border-radius: 10rpx 0 0 10rpx;
	}

	.hide {
		display: none;
	}

	.modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;
	}
</style>
